import React from 'react'
import ReactDOM from 'react-dom'

// 首先我们需要导入一些组件...
import { BrowserRouter  as Router, Route ,Link } from 'react-router-dom'

// 然后我们从应用中删除一堆代码和
// 增加一些 <a> 元素...
class App extends React.Component {

  


  render() {
    return (
      <div>

        <h1>App</h1>
        {/* 把 <a> 变成 <a> */}
        <ul>
          <li><a to="/about">About</a></li>
          <li><a to="/inbox">Inbox</a></li>
        </ul>

        {/*
        接着用 `this.props.children` 替换 `<Child>`
        router 会帮我们找到这个 children
      */}
        {this.props.children}
      </div>
    );
  }
} 
class Inbox extends React.Component {
   
  
    render() {
      return (
        <div>
  
          <h1>Inbox</h1>
          {/* 把 <a> 变成 <a> */}
          <ul>
            <li><a to="/about">About</a></li>
            <li><a to="/inbox">Inbox</a></li>
          </ul>
  
          {/*
          接着用 `this.props.children` 替换 `<Child>`
          router 会帮我们找到这个 children
        */}
          {this.props.children}
        </div>
      );
    }
  }
  
class About extends React.Component {
  
 
    render() {
      return (
        <div>
  
          <h1>about</h1>
          {/* 把 <a> 变成 <a> */}
          <ul>
            <li><a to="/about">About</a></li>
            <li><a to="/inbox">Inbox</a></li>
          </ul>
  
          {/*
          接着用 `this.props.children` 替换 `<Child>`
          router 会帮我们找到这个 children
        */}
          {this.props.children}
        </div>
      );
    }
  }
// 最后，我们用一些 <Route> 来渲染 <Router>。
// 这些就是路由提供的我们想要的东西。
ReactDOM.render((
  <Router>
    <div>
     <Route exact path="/" component={App}/>
     <Route path="/Inbox" component={Inbox}/>
     <Route path="/About" component={About}/>
     </div>
  </Router>
), document.body)